<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">用户详情</title>
    <script src="../../static/plugins/jquery/jquery-3.4.1.min.js" th:src="@{~/static/plugins/jquery/jquery-3.4.1.min.js}"></script>
    <script src="../../static/plugins/popper/popper.min.js"></script>
    <script src="../../static/plugins/bootstrap/js/bootstrap.js"></script>
    <script src="../../static/js/base.js" th:src="@{~/static/js/base.js}"></script>
    <link rel="stylesheet" href="../../static/plugins/bootstrap/css/bootstrap.css" th:src="@{~/static/plugins/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" href="../../static/css/base.css" th:src="@{~/static/css/base.css}">
</head>
<body>
    <form class="form" th:action="@{~/users}" th:method="${method}">
        <input type="hidden" name="id" th:value="${user?.id}">
        <div class="form-group">
            <label class="col-form-label" for="username">用户名</label>
            <input id="username" name="username" type="text" placeholder="请输入用户名" class="form-control" th:value="${user?.username}">
        </div>
        <div class="form-group">
            <label class="col-form-label" for="nickname">昵称</label>
            <input id="nickname" name="nickname" type="text" placeholder="请输入昵称" class="form-control" th:value="${user?.nickname}">
        </div>
        <div class="form-group">
            <label class="col-form-label" for="roles">角色</label>
            <select id="roles" name="roles" class="custom-select" multiple>
                <option th:each="role : ${roles}" th:selected="${user?.roles?.contains(role)}" th:value="${role.id}" th:text="${role.name}">管理员</option>
                <!--/*-->
                <option>会员</option>
                <option>普通用户</option>
                <option>超级会员</option>
                <!--*/-->
            </select>
        </div>
        <div class="form-group">
            <label class="col-form-label" for="expirationDate">账户期限</label>
            <input id="expirationDate"
                   name="expirationDate"
                   type="date"
                   class="form-control"
                   th:value="${#dates.format(user?.expirationDate, 'yyyy-MM-dd')}"
                   data-toggle="tooltip"
                   title="留空为永不过期">
        </div>
        <div class="form-group">
            <label class="col-form-label" for="credentialsExpirationDate">密码到期时间</label>
            <input id="credentialsExpirationDate"
                   name="credentialsExpirationDate"
                   type="date"
                   class="form-control"
                   th:value="${#dates.format(user?.credentialsExpirationDate, 'yyyy-MM-dd')}"
                   data-toggle="tooltip"
                   title="留空为永不过期">
        </div>
        <div class="form-check">
            <input type="checkbox" id="locked" name="locked" class="form-check-input" th:checked="${user?.locked}">
            <label for="locked" class="form-check-label">锁定</label>
        </div>
        <div class="form-check">
            <input type="checkbox" id="enabled" name="enabled" class="form-check-input" th:checked="${user?.enabled}">
            <label for="enabled" class="form-check-label">可用</label>
        </div>
        <div class="form-group">
            <button type="submit" class="btn  btn-block btn-primary">提交</button>
        </div>
    </form>
<script>
    $(function () {
        $("input[title]").tooltip()
    })
</script>
</body>
</html>